
<style>
  table {text-align:center;}
  thead tr{}
  tbody tr:nth-child(even){background:#F5F5F5;}
  tbody tr:nth-child(odd){background:#EECFA1;}
</style>

<template>
  <div>
    <div>
    在线设备数:<span>{{online_dev_num}}</span>台
    </div>
    <div>
      设备选择:
      <Select placeholder="请选择省" class="search-col" style="width:10%" v-model="select_sheng_val"  v-on:input="select_sheng">
         <Option  v-for="val,key in sheng" v-bind:value="val.districtId">{{val.districtName}}</Option>
      </Select>&nbsp;&nbsp;
       <Select  class="search-col" placeholder="请选择市" v-model="select_shi_val"  style="width:10%"  v-on:input="select_shi">
        <Option  v-for="val in shi " v-bind:value="val.districtId">{{val.districtName}}</Option>
      </Select>&nbsp;&nbsp;
      <Select  class="search-col" placeholder="请选择区" v-model="select_qu_val"  style="width:10%" v-on:input="select_qu">
         <Option  v-for="val,key in qu " v-bind:value="val.districtId">{{val.districtName}}</Option>
      </Select>&nbsp;&nbsp;
      <Select  class="search-col"  placeholder="请选择设备" v-model="select_dev_val" v-on:input="select_devsn" style="width:10%">
      <Option  v-for="val,key in dev_type_list " v-bind:value="val.deviceSn">{{val.deviceName}}</Option>
      </Select>
    </div>
    <div>
      <div>设备参数配置:</div>
        <div style="width:32%;float:left;margin-let:2%">
          <div>
            &nbsp;&nbsp;&nbsp;&nbsp;<span>移动扫频设备</span>&nbsp;&nbsp;<span>
            <Input  clearable placeholder="输入编码" v-model="input_yidong" class="search-input" style="width:28%"/>
            &nbsp;&nbsp;
            <Button  class="search-btn" type="primary" v-on:click='queryFreq(0)'><Icon type="search"/>&nbsp;&nbsp;查询</Button>
             &nbsp;
            <Button  class="search-btn" type="primary" v-on:click='get_table(1)'><Icon type="search"/>&nbsp;&nbsp;设置</Button>
            </span>
          </div>
          <div style="height:200px;border:1px solid;width:99%;overflow: scroll;margin-top:10px">
            <table style="width:100%;">
              <thead>
                <tr style="">
                  <th>频点</th>
                  <th>小区标识</th>
                  <th>大区码</th>
                  <th>小区码</th>
                  <th>sibOk</th>
                  <th>sibNok</th>
                  <th>sinr</th>
                  <th>布控</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="val in yidong_table">
                  <td>{{val.freq}}</td>
                  <td>{{val.pci}}</td>
                  <td>{{val.tac}}</td>
                  <td>{{val.cell}}</td>
                  <td>{{val.sibOk}}</td>
                  <td>{{val.sibNok}}</td>
                  <td>{{val.sinr}}</td>
                  <td>
                    <button v-bind:id="val.id"  v-on:click='set_control(val.id,0,val.pci,val.freq)'>{{status_info[val.status]}}</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div style="width:32%;float:left;margin-let:2%">
          <div>
            &nbsp;&nbsp;&nbsp;&nbsp;<span>联通扫频设备</span>&nbsp;&nbsp;<span>
            <Input  clearable placeholder="输入编码" v-model='input_liantong' class="search-input" style="width:28%"/>
            &nbsp;&nbsp;
             <Button  class="search-btn" type="primary"  v-on:click='queryFreq(1)'><Icon type="search"/>&nbsp;&nbsp;查询</Button>
              &nbsp;
              <Button  class="search-btn" type="primary" v-on:click='get_table(2)'><Icon type="search"/>&nbsp;&nbsp;设置</Button>
            </span>
          </div>
          <div style="height:200px;border:1px solid;width:99%;overflow: scroll;margin-top:10px"">
            <table style="width:100%;">
              <thead>
                <tr style="">
                  <th>频点</th>
                  <th>小区标识</th>
                  <th>大区码</th>
                  <th>小区码</th>
                  <th>sibOk</th>
                  <th>sibNok</th>
                  <th>sinr</th>
                  <th>布控</th>
                </tr>
              </thead>
              <tbody>
                  <tr v-for="val in liantong_table">

                    <td>{{val.freq}}</td>
                    <td>{{val.pci}}</td>
                    <td>{{val.tac}}</td>
                    <td>{{val.cell}}</td>
                    <td>{{val.sibOk}}</td>
                    <td>{{val.sibNok}}</td>
                    <td>{{val.sinr}}</td>
                    <td>
                    <button v-bind:id="val.id" v-on:click='set_control(val.id,1,val.pci,val.freq)'>{{status_info[val.status]}}</button>
                    </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div style="width:32%;float:left;margin-let:2%">
          <div>
            &nbsp;&nbsp;&nbsp;&nbsp;<span>电信扫频设备</span>&nbsp;&nbsp;<span>
            <Input  clearable placeholder="输入编码" v-model='input_dainxin'  class="search-input" style="width:28%"/>
              &nbsp;&nbsp;
             <Button  class="search-btn" type="primary" v-on:click='queryFreq(2)'><Icon type="search"/>&nbsp;&nbsp;查询</Button>
              &nbsp;
             <Button  class="search-btn" type="primary" v-on:click='get_table(3)'><Icon type="search"/>&nbsp;&nbsp;设置</Button>
            </span>
          </div>
          <div style="height:200px;border:1px solid;width:99%;overflow: scroll;margin-top:10px">
            <table style="width:100%;">
              <thead>
                <tr style="">
                  <th>频点</th>
                  <th>小区标识</th>
                  <th>大区码</th>
                  <th>小区码</th>
                  <th>sibOk</th>
                  <th>sibNok</th>
                  <th>sinr</th>
                  <th>布控</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="val in dianxing_table">
                  <td>{{val.freq}}</td>
                  <td>{{val.pci}}</td>
                  <td>{{val.tac}}</td>
                  <td>{{val.cell}}</td>
                  <td>{{val.sibOk}}</td>
                  <td>{{val.sibNok}}</td>
                  <td>{{val.sinr}}</td>
                  <td>
                  <button v-bind:id="val.id"  v-on:click='set_control(val.id,2,val.pci,val.freq)'>{{status_info[val.status]}}</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
// import axios from '@/libs/api.request'
import axios from 'axios'
import qs from 'qs'
var debug = false
var dev_setInterval = false
if (debug == true) {
  var request_url = {
    'get_table': '/api?ctl=get_data',
    'get_sheng': '/api?ctl=sheng',
    'get_shi': '/api?ctl=get_shi',
    'get_qu': '/api?ctl=get_qu',
    'get_device': '/api?ctl=get_device_name',
    'get_online_num': '/api?ctl=get_online_num'
  }
} else {
  var request_url = {
    'get_table': '/api/onlineDevice/setFreq',
    'get_sheng': '/api/onlineDevice/deviceOption',
    'get_shi': '/api/onlineDevice/deviceOption',
    'get_qu': '/api/onlineDevice/deviceOption',
    'get_device': '/api/onlineDevice/deviceName',
    'get_online_num': '/api/onlineDevice/deviceCount',
    'get_table_list': '/api/onlineDevice/cellReportInfo',
    'publishControl': '/api/onlineDevice/publishControl',
    'queryFreq': '/api/onlineDevice/queryFreq'
  }
}
export default {
  data () {
    return {
      sheng: [],
      shi: [],
      qu: [],
      dev_type_list: [],
      online_dev_num: 0,
      dev_datas: [],
      communication_type: [],
      dianxing_table: [],
      liantong_table: [],
      yidong_table: [],
      input_yidong: '',
      input_liantong: '',
      input_dainxin: '',
      select_sheng_val: '',
      select_shi_val: '',
      select_qu_val: '',
      select_dev_val: '',
      yidong_control: false,
      liangtong_control: false,
      dianxing_control: false,
      status_info: { 'false': '布控', 'true': '取消' }
    }
  },
  created: function () {
    var url = request_url.get_sheng
    var parames = { 'districtPid': 1 }
    axios.post(url, parames)
      .then(res => {
        if (res.data.success == true) {
          this.sheng = res.data.districtList
        }
      })
    var obj = this
    var url = request_url.get_online_num
    axios.get(url)
      .then(res => {
        if (res.data.success == true) {
          obj.online_dev_num = res.data.deviceCount
        } else {
          alert('获取在线设备失败')
        }
      })
    setInterval(function () {
      var url = request_url.get_online_num
      axios.get(url)
        .then(res => {
          if (res.data.success == true) {
            obj.online_dev_num = res.data.deviceCount
          } else {
            alert('获取在线设备失败')
          }
        })
    }, 10000)
  },
  methods: {
    get_table (id) {
      if (id == 1) {
        var input_code = this.input_yidong
      } else if (id == 2) {
        var input_code = this.input_liantong
      } else {
        var input_code = this.input_dainxin
      }
      var sheng_val = this.select_sheng_val
      var shi_val = this.select_shi_val
      var qu_val = this.select_qu_val
      var dev_val = this.select_dev_val
      if (qu_val != '') {
        var diqu = 3
        var diqu_code = qu_val
      } else if (shi_val != '') {
        var diqu = 2
        var diqu_code = shi_val
      } else if (sheng_val != '') {
        var diqu = 1
        var diqu_code = sheng_val
      }
      if (dev_val == '' || input_code == '') {
        alert('请选择设备和请输入扫频设备')
        return false
      }
      var parames = {
        // 'freqType': 2, // 设置
        'freqType': id,
        'deviceSn': dev_val,
        'freqString': input_code
      }
      var url = request_url.get_table
      axios.post(url, parames)
        .then(res => {
          if (res.data.success == true) {
            alert('设置成功')
          } else {
            alert(res.data.errMsg)
          }
        })
    },
    select_sheng (e) {
      var url = request_url.get_shi
      var parames = {
        'districtPid': e
      }
      axios.post(url, parames)
        .then(res => {
          if (res.data.success == true) {
            this.shi = res.data.districtList
          } else {
            alert(res.data.errMsg)
          }
        })
    },
    select_shi (e) {
      var url = request_url.get_qu
      var parames = {
        'districtPid': e
      }
      axios.post(url, parames)
        .then(res => {
          if (res.data.success == true) {
            this.qu = res.data.districtList
          } else {
            alert(res.data.errMsg)
          }
        })
    },
    select_qu (e) {
      var url = request_url.get_device
      var parames = {
        'districtId': e
      }
      axios.post(url, parames)
        .then(res => {
          if (res.data.success == true) {
            this.dev_type_list = res.data.deviceList
          } else {
            alert(res.data.errMsg)
          }
        })
    },
    select_devsn (e) {
      var url = request_url.get_table_list
      var parames = {
        'deviceSn': e
      }
      axios.post(url, parames)
        .then(res => {
          if (res.data.success == true) {
            this.yidong_table = res.data.reportInfoList[0].reportInfo
            this.liantong_table = res.data.reportInfoList[1].reportInfo
            this.dianxing_table = res.data.reportInfoList[2].reportInfo
            for (var i = 0; i < this.yidong_table.length; i++) {
              if (this.yidong_table[i].status == true) {
                this.yidong_control = this.yidong_table[i].id
              }
            }
            for (var i = 0; i < this.liantong_table.length; i++) {
              if (this.liantong_table[i].status == true) {
                this.liangtong_control = this.liantong_table[i].id
              }
            }
            for (var i = 0; i < this.dianxing_table.length; i++) {
              if (this.dianxing_table[i].status == true) {
                this.dianxing_control = this.dianxing_table[i].id
              }
            }
          }
        })
      if (dev_setInterval != false) {
        clearInterval(dev_setInterval)
      }
      dev_setInterval = setInterval(function () {
        axios.post(url, parames)
          .then(res => {
            if (res.data.success == true) {
              this.yidong_table = res.data.reportInfoList[0].reportInfo
              this.liantong_table = res.data.reportInfoList[1].reportInfo
              this.dianxing_table = res.data.reportInfoList[2].reportInfo
              for (var i = 0; i < this.yidong_table.length; i++) {
                if (this.yidong_table[i].status == true) {
                  this.yidong_control = this.yidong_table[i].id
                }
              }
              for (var i = 0; i < this.liantong_table.length; i++) {
                if (this.liantong_table[i].status == true) {
                  this.liangtong_control = this.liantong_table[i].id
                }
              }
              for (var i = 0; i < this.dianxing_table.length; i++) {
                if (this.dianxing_table[i].status == true) {
                  this.dianxing_control = this.dianxing_table[i].id
                }
              }
            }
          })
      }, 10000)
    },
    // 设置布控
    set_control (e, e1, pci, freq) {
      var deviceSn = this.select_dev_val
      var parames = {
        deviceSn: deviceSn,
        freq: freq,
        pci: pci,
        operator: e1
      }
      var url = request_url.publishControl
      if (e1 == 0) {
        if (document.getElementById(e).innerHTML == '布控') {
          if (this.yidong_control != false) {
            alert('请先取消布控')
            return
          }
          parames.code = true
          axios.post(url, parames)
            .then(res => {
              if (res.data.success == true) {
                document.getElementById(e).innerHTML = '取消'
                console.log('xx5')
                this.yidong_control = e
              } else {
                alert(res.data.errMsg)
              }
            })
        } else if (document.getElementById(e).innerHTML == '取消') {
          parames.code = false
          axios.post(url, parames)
            .then(res => {
              if (res.data.success == true) {
                this.yidong_control = false
                document.getElementById(e).innerHTML = '布控'
              } else {
                alert(res.data.errMsg)
              }
            })
        }
      }
      if (e1 == 1) {
        if (document.getElementById(e).innerHTML == '布控') {
          if (this.liangtong_control != false) {
            alert('请先取消布控')
            return
          }
          parames.code = true
          axios.post(url, parames)
            .then(res => {
              if (res.data.success == true) {
                document.getElementById(e).innerHTML = '取消'
                this.liangtong_control = e
              } else {
                alert(res.data.errMsg)
              }
            })
        } else if (document.getElementById(e).innerHTML == '取消') {
          parames.code = false
          axios.post(url, parames)
            .then(res => {
              if (res.data.success == true) {
                this.liangtong_control = false
                document.getElementById(e).innerHTML = '布控'
              } else {
                alert(res.data.errMsg)
              }
            })
        }
      }
      if (e1 == 2) {
        if (document.getElementById(e).innerHTML == '布控') {
          if (this.dianxing_control != false) {
            alert('请先取消布控')
            return
          }
          parames.code = true
          axios.post(url, parames)
            .then(res => {
              if (res.data.success == true) {
                document.getElementById(e).innerHTML = '取消'
                this.dianxing_control = e
              } else {
                alert(res.data.errMsg)
              }
            })
        } else if (document.getElementById(e).innerHTML == '取消') {
          parames.code = false
          axios.post(url, parames)
            .then(res => {
              if (res.data.success == true) {
                this.dianxing_control = false
                document.getElementById(e).innerHTML = '布控'
              } else {
                alert(res.data.errMsg)
              }
            })
        }
      }
    },
    queryFreq (e) {
      if (!this.select_dev_val) {
        alert('请先选择设备')
        return
      }
      var deviceSn = this.select_dev_val
      var url = request_url.queryFreq
      var parames = {
        deviceSn: deviceSn,
        freqType: e
      }

      axios.post(url, parames)
        .then(res => {
          if (e == 2) {
            this.input_dainxin = res.data.freqString
          } else if (e == 0) {
            this.input_yidong = res.data.freqString
          } else if (e == 1) {
            this.input_liantong = res.data.freqString
          }
        })
    }

  }

}
</script>
